<template>
  <div id="meter-message">
  <validator name='v'  @valid="onValid()"  @invalid="onInvalid()">
  <div class="flex-row auto">
      <!-- <div class="thumbnail">
        <img :src="imgsrc" alt="图片加载失败" class="img-rounded" style="width: 60px;">
        <div class="caption" style="padding: 3px;">
          <p class="flex-row" style="justify-content: space-around;margin: 0px;">
            <button type="button" name="button" class="btn btn-link" :disabled="metermessage.f_table_state === '停用'">停用</button>
            <button type="button" name="button" class="btn btn-link" :disabled="metermessage.f_table_state === '正常'">启用</button>
          </p>
        </div>
      </div> -->
      <form class="form-horizontal" style="flex: 1; padding: 5px;">
        <div class="form-group auto">
          <div class="col-sm-3" style="padding-right: 5px;" :class="[$v.meternumber.required ? 'has-error' : '']">
            <input type="text" class="form-control" v-model="metermessage.f_meternumber" v-validate:meternumber='{required: true }' placeholder='表号' >
          </div>
          <div class="col-sm-3" style="padding-right: 5px;">
            <input type="text" class="form-control" v-model="metermessage.f_metertitles" placeholder='表封号'>
          </div>
          <div class="col-sm-3" :class="[$v.brand.required ? 'select-error' : '']">
            <input type="text" v-show="false" v-model="$refs.brand.selectedItems" v-validate:brand='{required: true }'>
            <v-select :value.sync="metermessage.gasbrand" :options='meterbrands' @change='brandChange' placeholder='气表品牌' close-on-select
              v-model='metermessage.gasbrand' v-ref:brand></v-select>
          </div>
          <div class="col-sm-3" :class="[$v.model.required ? 'select-error' : '']">
             <input type="text" v-show="false" v-model="$refs.model.selectedItems"  v-validate:model='{required: true }'>
             <v-select :value.sync="metermessage.gasmodel" :options='metermessage.gasbrand[0].gasmodel' placeholder='气表型号' close-on-select
               v-model='metermessage.gasmodel' :disabled= 'metermessage.gasbrand.length === 0 ' v-ref:model></v-select>
           </div>
          <!-- <div class="col-sm-3" :class="[!$m.f_model.selectedItems || $m.f_model.selectedItems === '' ? 'select-error' : '']">
            <v-select :value.sync="metermessage.gasmodel" :options='metermessage.gasbrand[0].gasmodel' placeholder='气表型号' close-on-select
              v-model='metermessage.gasmodel' :disabled= 'metermessage.gasbrand.length === 0 ' ></v-select>
            <input type="text" v-show="false" v-model="$refs.gasmodel.selectedItems" v-validate:f_model="['required']">
            <v-select :value.sync="metermessage.gasmodel" :options='metermessage.gasbrand[0].gasmodel' placeholder='气表型号' close-on-select
              v-model='metermessage.gasmodel' :disabled= 'metermessage.gasbrand.length === 0 ' v-ref:gasmodel></v-select>
          </div> -->
        </div>

        <div class="form-group auto">
          <div class="col-sm-3" id='common-metMess-安装位置'>
            <v-select :value.sync="metermessage.f_position" v-model="metermessage.f_position"
                :options='positions' placeholder='安装位置'
                close-on-select></v-select>
            <!-- <v-select :value.sync="metermessage.f_user_type" v-model="metermessage.f_user_type"
                :options='usertypes' placeholder='用户类型'
                close-on-select></v-select> -->
          </div>
          <!-- <div class="col-sm-3">
            <v-select :value.sync="metermessage.pricetype" v-model="metermessage.pricetype"
                :options='pricetypes' placeholder='气价类型'
                close-on-select></v-select>
          </div>
          <div class="col-sm-6">
              <v-select :value.sync="metermessage.pricename" v-model="metermessage.pricename"
                  :options='getPricenames(metermessage.pricetype)' placeholder='气价名称'
                  close-on-select></v-select>
          </div> -->
          <div class="col-sm-3" style="padding-right: 5px;" :class="[$v.f_meter_base.required ? 'has-error' : '']">
            <input type="text" class="form-control" v-validate:f_meter_base='{required: true }' @blur='meterbase()' v-model="metermessage.f_meter_base" placeholder='表底数' >
            <!-- <v-select :value.sync="metermessage.f_gasproperties" v-model="metermessage.f_gasproperties"
                :options='gasproperties' placeholder='用气性质'
                close-on-select></v-select> -->
          </div>
          <div class="col-sm-3" id='common-metMess-抄表员'>
            <v-select :value.sync="metermessage.f_inputtor" v-model="metermessage.f_inputtor"
                :options='inputtores' placeholder='抄表员'
                close-on-select></v-select>
          </div>
        </div>


      </form>
    </div>
  </validator>
  </div>
</template>

<script>
/**
*公共组件
*获取气表信息
*/
import AppData from '../../../stores/AppData'

export default {
  data () {
    return {
      isdecimal: '否',
      imgsrc: '/images/mainicon/biaopan.png',
      imgmeter: '/images/mainicon/addmeter.png'
    }
  },
  props: ['metermessage'],
  methods: {
    onValid () {
      this.$dispatch('valid')
    },
    onInvalid () {
      this.$dispatch('invalid')
    },
    brandChange (val) {
      // console.log('咋又错了。。', val)
      this.isdecimal = val.length > 0 ? val[0].f_isdecimal : '否'
    },
    meterbase () {
      if (this.isdecimal === '是') {
        this.metermessage.f_meter_base = (this.metermessage.f_meter_base - 0).toFixed(2)
      } else {
        this.metermessage.f_meter_base = (this.metermessage.f_meter_base - 0).toFixed(0)
      }
    }
  },
  computed: {
    usertypes () {
      return AppData.getParam('用户类型')
    },
    pricetypes () {
      return AppData.getParam('气价类型')
    },
    // gasproperties () {
    //   return AppData.getParam('用气性质')
    // },
    positions () {
      return AppData.getParam('安装位置')
    },
    inputtores () {
      return AppData.getParam('抄表员')
    },
    meterbrands () {
      return AppData.getGasbrand()
    }
  }
}
</script>
<style lang="less">
  #meter-message {
    .form-group {
      margin: 0px 5px 5px 5px;
    }
    .btn-group, .btn-group-vertical {
      width: 100%;
      padding-right: 5px;
      button {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
    .dropdown-menu {
      width: 100%
    }
  }
</style>
